<template>
  <view :style="colorStyle">
    <view
      class="navTitleModule"
      :style="info.type !== 3 ? navTitleModuleStyle : ''"
    >
      <view
        class="block1"
        :style="{
          background: `${
            info.type !== 3 && info.bgType == 3 ? 'var(--view-theme)' : ''
          }`,
        }"
      >
        <view v-if="info.type == 1" class="w100 h100 block1Info">
          <view
            class="info1"
            :style="{
              background: `${info.bgType == 1 ? info.bgColor : ''}`,
              backgroundImage: `url(${info.bgType == 2 ? info.bgImg.img : ''})`,
              backgroundSize: `${info.bgType == 2 ? 'cover' : ''}`,
              backgroundPosition: `${info.bgType == 2 ? '50%' : ''}`,
              backgroundRepeat: `${info.bgType == 2 ? 'no-repeat' : ''}`,
            }"
          >
            <!-- <image :src="require('@/assets/topNavBlack.png')" alt="" /> -->
          </view>
          <view
            v-if="info.titleType == 1"
            :class="
              info.titlePin.type == 1
                ? 'info2 flex aitems'
                : 'info2 flex aitems jcenter'
            "
            :style="{
              color: info.color,
            }"
          >
            <image
              :src="info.titleText.logo"
              v-if="info.titleText.logo"
              alt=""
            />
            {{ info.titleText.text }}
          </view>
          <view
            v-if="info.titleType == 2"
            class="info3"
            :style="{
              color: info.color,
              left: `${info.titlePin.type == 1 ? '30rpx' : ''}`,
              margin: `${info.titlePin.type == 1 ? '0' : ''}`,
            }"
          >
            <image :src="info.titleImg.img" v-if="info.titleImg.img" alt="" />
          </view>
        </view>
        <view v-if="info.type == 2" class="w100 h100 block1Info">
          <view
            class="info1"
            :style="{
              background: `${info.bgType == 1 ? info.bgColor : ''}`,
              backgroundImage: `url(${info.bgType == 2 ? info.bgImg.img : ''})`,
              backgroundSize: `${info.bgType == 2 ? 'cover' : ''}`,
              backgroundPosition: `${info.bgType == 2 ? '50%' : ''}`,
              backgroundRepeat: `${info.bgType == 2 ? 'no-repeat' : ''}`,
            }"
          >
            <!-- <image :src="require('@/assets/topNavBlack.png')" alt="" /> -->
          </view>
          <view
            :class="'info4 flex aitems'"
            :style="{
              color: info.color,
            }"
          >
            <view
              v-if="info.titleType == 1"
              class="ellipsis1"
              style="max-width: 150rpx"
            >
              {{ info.titleText.text }}
            </view>
            <view v-if="info.titleType == 2">
              <image
                v-if="info.titleImg.img"
                :src="info.titleImg.img"
                style="width: 60rpx; height: 60rpx"
                alt=""
              />
            </view>
            <view
              :class="
                info.titleType == 1
                  ? 'search flex aitems'
                  : info.titleType == 2
                  ? 'search2 flex aitems'
                  : ''
              "
              @click="gourl(`/pages/goods/search`)"
            >
              <view style="width: 20rpx"></view>
              <u-icon name="search" size="20" color="#a1a1a1"></u-icon>
              <view class="searchvalue">{{ info.search.value }}</view>
            </view>
          </view>
        </view>
        <view v-if="info.type == 3">
          <view class="info5">
            <view
              :style="{
                backgroundImage: `url(${info.platformLogo.img})`,
              }"
              class="filter"
            >
              <view class="gaosi-content"></view>
            </view>
            <view class="topNavBlack" style="height: 176rpx">
              <!-- <image :src="require('@/assets/topNavBlack.png')" alt="" /> -->
            </view>
            <view class="tipbox1">
              <image :src="info.platformLogo.img" class="platformLogo" alt="" />
              <view class="tip1">{{ info.platformName.value }}</view>
              <view class="tip2">{{ info.platformDesc.value }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- #ifdef H5 -->
    <view class="" style="height: 440rpx" v-if="info.type == 3"> </view>
    <view class="" style="height: 88rpx" v-if="info.type !== 3"> </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="" style="height: 440rpx" v-if="info.type == 3"> </view>
    <view
      class=""
      :style="{ height: `${menuInfo.top + menuInfo.height + 6}px` }"
      v-if="info.type !== 3"
    >
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import colors from "@/mixins/color";
import { go } from "@/utils/wxAPI";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
  },
  data() {
    return {
      menuInfo: {},
      navTitleModuleStyle: "",
    };
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `height:${
      this.menuInfo.height + this.menuInfo.top + 6
    }px`;
    // #endif
  },
  methods: {
    gourl(url) {
      go(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.navTitleModule {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  // #ifdef H5
  min-height: 88rpx;
  // #endif
  top: 0;

  .block1 {
    height: 100%;
    // #ifdef H5
    min-height: 88rpx;
    // #endif
    width: 100%;
    background: #fff;
    position: relative;

    .block1Info {
      position: absolute;
      top: 0;
    }

    .info1 {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
      }
    }

    .info2 {
      width: calc(100% - 60rpx);
      margin: 0 30rpx;
      font-size: 32rpx;
      font-weight: 400;
      position: absolute;
      // justify-content: center;
      bottom: 20rpx;

      image {
        width: 48rpx;
        height: 48rpx;
        margin: 0 16rpx 0 0;
      }
    }

    .info3 {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      left: 50%;
      margin-left: -30rpx;
      bottom: 16rpx;

      image {
        width: 30px;
        height: 30px;
      }
    }

    .info4 {
      width: calc(100% - 60rpx);
      margin: 0 30rpx;
      font-size: 32rpx;
      font-weight: 400;
      position: absolute;
      bottom: 12rpx;

      .search {
        background: #f5f5f5;
        color: #a1a1a1;
        font-size: 26rpx;
        height: 64rpx;
        // #ifdef MP-WEIXIN
        width: 350rpx;
        // #endif
        // #ifdef H5
        width: calc(100% - 150rpx);
        // #endif
        border-radius: 34rpx;
        margin-left: 20rpx;

        .searchvalue {
          margin-left: 20rpx;
        }
      }
      .search2 {
        background: #f5f5f5;
        color: #a1a1a1;
        font-size: 26rpx;
        height: 64rpx;
        // #ifdef MP-WEIXIN
        width: 430rpx;
        // #endif
        // #ifdef H5
        width: calc(100% - 70rpx);
        // #endif
        border-radius: 34rpx;
        margin-left: 20rpx;

        .searchvalue {
          margin-left: 20rpx;
        }
      }
    }

    .info5 {
      height: 440rpx;
      overflow: hidden;
      width: 100%;

      .filter {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(20rpx);
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        // position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        transform: scale(1.08); //解决代码

        // background: #666;
        .gaosi-content {
          background: #000;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          // width: 100%;
          height: 100%;
          opacity: 0.6;
        }
      }

      .topNavBlack {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 9;
        height: 176rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .tipbox1 {
        position: absolute;
        z-index: 9;
        top: 176rpx;
        width: 100%;
        text-align: center;

        .platformLogo {
          width: 116rpx;
          height: 116rpx;
          object-fit: cover;
          border-radius: 50%;
          overflow: hidden;
          margin: auto;
          text-align: center;
          border: 2rpx solid rgba(255, 255, 255, 0.3);
        }

        .tip1 {
          color: #fff;
          font-size: 36rpx;
          text-align: center;
          margin: 24rpx 0 0;
          font-weight: bold;
        }

        .tip2 {
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          margin: 12rpx 0 0;
        }
      }
    }
  }
}
</style>
